<template><!--我的证书-->
    <div style="height: 100%">
        <navbar :backCallback="back" :title="$t('my_certificate')"></navbar>
        <div class="content-noBottom">
            <div class="body-content" style="height: calc(100% - 44px);" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                        v-model="isLoading"
                        :finished="finished"
                        :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                        loding-text="loading"
                        @load="getCertificateList"
                        >
                        <div class="module-box-11" v-if="total > 0">
                            <ul>
                                <li style="position: relative;" class="white-bg bottom-shadow clearfix" v-for="(item, index) in certificateList" :key="index"
                                    @click="toPreview(item)">
                                    <p class="word-clamp-2 font-size16">{{item.cfcTitle}}</p>
                                    <p class="color999" style="margin: 5px 0 14px;">{{$t('obtain_sources')}}：{{item.itmTitle}}</p> <!-- 获得来源 -->
                                    <div class="cf-expired" v-if="item.expired">
                                        <!-- 已过期 -->
                                        <img style="width: 100%; height: 100%" :src="imgList[0]" fit="cover" alt="已过期"/>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--暂无数据-->
                        <div v-if="total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t("no_data") }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
    </div>
</template>

<script>
import expiredImg from '../../../static/images/expired.png';
export default {
    name: 'myCertificate',
    data() {
        return {
            pageNo: 1,
            certificateList: [],
            total: 0,
            imgList: [expiredImg],
            finished: false,
            isRefresh: false,
            isLoading: false
        };
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.certificateList = [];
                this.pageNo = 1;
                this.getCertificateList();
                this.isRefresh = false;
            }, 900);
        },
        getCertificateList() {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/certificate/find/list',
                params: {
                    pageSize: 10,
                    pageNo: this.pageNo
                }
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    this.certificateList = [...this.certificateList, ...res.data.results];
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.certificateList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        toPreview(item) {
            this.$router.push('/myCertificate/preview/' + item.itmId + '/' + item.acType + '/' + item.cfcId);
        }
    },
    mounted() {
        this.getCertificateList();
    }
};
</script>

<style scoped>
  .box-tab-01 {
      height: 44px;
  }
  .box-tab-01 ul li {
      float: left;
      line-height: 41px;
      font-size: 16px;
      margin-right: 50px;
      border-bottom: 3px solid #ffffff;
  }
  .box-tab-01 ul li.cur {
      color: #0078F0;
      border-color: #0078F0;
  }
  .module-box-11 {
      margin: 15px 15px 0;
  }
  .module-box-11 ul li {
      padding: 15px 15px 15px;
      margin-bottom: 12px;
  }
  .module-box-11 ul li:nth-last-child(1) {
      margin-bottom: 0;
  }
  .time-icon-02 {
      background-position: 0 -42px;
  }
  .cf-expired {
      position: absolute;
      top: 25px;
      right: 10px;
      width: 50px;
  }
</style>
